前端开发人员快速搭建本地服务器的3种方法(针对项目目录) |
您所在的位置:网站首页 › power bi 本地服务器 免费 › 前端开发人员快速搭建本地服务器的3种方法(针对项目目录) |
搭建本地服务器,是为了在同一个局域网下可以通过ip访问到本地网址。 在前端项目中搭建本地服务器可以实现局域网内个多个设备(手机和电脑)运行同一个地址就可以看到效果。 一、node的http-server node的http-server模块是最简单,最快速的(应该还有更好的)。 1.安装nodejs官网地址:https://nodejs.org/en/ 2.安装node1.不管你是windows 还是 mac osx 环境下都是傻瓜式安装 2.安装结束后,打开命令行工具 3.输入命令node -v 检测node是否安装成功,安装成功,会显示版本信息 4.输入npm -v 检测npm安装是否成功 3.安装http-server模块 1.还是在命令行里操作,cd 命令进入你的一个项目文件,比如app文件夹是你的项目文件夹,cd app 2.输入命令 npm install -g http-server 安装模块 4.开启服务器在cmd命令行中输入http-server,本地服务器就开启啦,默认端口是:8080,在浏览器中输入localhost:8080就可以使用了。 ps:同一wifi两台电脑和手机亲测有效!(图书馆wifi不行) 使用说明: 1)在VS Code项目中打开 终端(Ctrl + ~),进入项目根目录 cd carousel_map2)输入http-server命令 carousel_map> http-server如图:
3)在手机浏览器中打开网站,index.html所在根目录,会显示index.html的内容 http://192.168.0.103:8080/carousel_css_transition示意图如下: 注:手机浏览器中URL实际完整路径为:192.168.0.103:8080/carousel_css_transition 注:若项目根目录下无index.html文件,则只会显示文件目录,可点击其他html文件进行打开网站,亦可在URL中输入完整的html路径访问,如: 192.168.0.103:8080/bubbles.html
另外,对于react开发的项目,npm start运行项目之后,也可在手机中输入以下URL访问网站 http://192.168.0.103:3000二、anywhere 1.安装node 2.安装好了,我们打开cmd,输入命令行1:node -v, 这里是查询node版本,出现版本号说明安装成功。 3.输入命令行npm install anywhere -g 这里是全局变量 4.找到要启动本地服务器的静态文件夹,执行命令:anywhere 它就会自动弹出你的项目页面
5.浏览器运行https://X.X.X.X:8000/ 或 http://localhost:8000/ 6.再找到相应的文件进行打开 ps:同一wifi两台电脑和手机亲测有效!(图书馆wifi不行) 三、VS Code的Live Server插件 前端使用vscode编辑器,安装live serve插件 然后在vscode编辑器的右下角有 Go live 按钮,点击自动启动本地服务器 ps:同一wifi两台电脑和手机亲测有效!(图书馆wifi不行) 总结 http-server、anywhere、Live Server插件 都是针对项目目录起作用。第三方设备使用【IP:端口】作为URL访问时,能查看到此项目目录下所有文件信息。 当项目目录下有名为index.html文件时,第三方设备使用【IP:端口】进行访问时,能直接查看到index.html渲染出来的页面。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |